<template>
  <div class="about">
    <!--@submit是vant组件中提供的事件名，不能修改，onSubmit是我们自定义的方法名，可以随意定义-->
    <van-form @submit="onSubmit" @failed="onFailed">
      <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
 export default {
   data(){
     return {
       username: '',
       password: ''
     };
   },
   methods:{
     onSubmit(values){
       console.log('submit',values);
     },
     onFailed(errorInfo){
       //提交失败时(用户名和密码为空)，输出错误信息
       console.log(errorInfo);
     }
   }
 }
</script>